<template>
	<div>
		<div class="p-1 m-1 rounded shadow" v-for="(item, index) in permissions"  
			:style="{'background-color':CONST.getPermissionTypeName(item.type).bgcolor}">
			<div class="m-1 d-flex justify-content-between align-items-center">
				
				<a @click="trigger(item)" class="text-black-50"><Icon v-if="item.selected" class="text-primary" :size="20" type="md-checkbox" />
				<Icon v-else :size="20" type="md-square-outline" />{{item.name}}</a>
				
				<span :style="{'background-color':CONST.getPermissionTypeName(item.type).color}" class="text-white px-2 rounded-pill">
				<Icon :type="CONST.getPermissionTypeName(item.type).icon" />
				{{CONST.getPermissionTypeName(item.type).name}}</span>
			</div>
			<div class="ml-3 bg-red">
				<permission-tree :permissions="item.permissions"></permission-tree>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "permission-tree",
		props: {
			permissions: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			current: function() {
				return this.store.state.currentUser;
			},
		},
		data: function() {
			return {
				
			}
		},
		created: function(){
			
		},
		methods: {
			trigger: function(item) {
				if (item.selected) {
					item.selected = false;
				} else {
					item.selected = true;
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style>
</style>